<template>
  <div>
    <div class="q-mt-md">
      <a-head :user="auth" :size="48" :popover="false" class="q-px-md q-mb-md"></a-head>
      <div class="border-top-1-eee q-py-md relative-position" style="min-height: 80px">
        <div v-if="instance" class="row justify-around">
          <div class="text-center">
            <div class="text-grey-7">地图</div>
            <div class="bold size-18">{{ instance.map_number }}</div>
          </div>
          <div class="text-center">
            <div class="text-grey-7">协作</div>
            <div class="bold size-18">{{ instance.mapmember_number }}</div>
          </div>
          <div class="text-center">
            <div class="text-grey-7">讨论</div>
            <div class="bold size-18">{{ instance.forum_number }}</div>
          </div>
          <div class="text-center">
            <div class="text-grey-7">被赞</div>
            <div class="bold size-18">{{ instance.up_count }}</div>
          </div>
          <div class="text-center">
            <div class="text-grey-7">被收藏</div>
            <div class="bold size-18">{{ instance.collect_number }}</div>
          </div>
        </div>
        <a-loading :visible="!instance"></a-loading>
      </div>
    </div>
    <q-list no-border separator>
      <q-item class="q-my-xs border-top-1-eee" to="/account/maps/">
        <q-item-main>我的地图</q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
      <!--<q-item class="q-my-xs" to="/account/share/">-->
        <!--<q-item-main>我的协作</q-item-main>-->
        <!--<q-item-side icon="keyboard_arrow_right"></q-item-side>-->
      <!--</q-item>-->
      <q-item class="q-my-xs" to="/account/forums/">
        <q-item-main>我的讨论</q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
      <q-item class="q-my-xs" to="/account/favorites/">
        <q-item-main>我的收藏</q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
      <q-item class="q-my-xs" to="/account/notifications/">
        <q-item-main class="row items-center">我的消息
          <q-chip v-if="unreadNotifyCount" color="negative" dense>
          {{ unreadNotifyCount }}
          </q-chip>
        </q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
      <q-item class="q-my-xs" to="/account/people/">
        <q-item-main>个人主页</q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
      <q-item class="q-my-xs" to="/account/settings/">
        <q-item-main>账号设置</q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
      <q-item class="q-my-xs border-bottom-1-eee" to="/account/settings/" @click.native="quit">
        <q-item-main>退出</q-item-main>
        <q-item-side icon="keyboard_arrow_right"></q-item-side>
      </q-item>
    </q-list>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { authMixin } from '../../mixins'

  export default {
    name: 'pageAccountNav',
    mixins: [authMixin],
    data: function () {
      return {
        instance: null,
        loading: false
      }
    },
    created () {
      this.getRequest({
        api: '/api/user/{id}/statistic/',
        id: this.auth.id
      })
    },
    computed: {
      ...mapState(['unreadNotifyCount'])
    }
  }
</script>

<style lang="stylus">

</style>
